<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="CYW">
    <title></title>
</head>
<style>
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
    }

    .containter {
        width: 1200px;

        margin: 0 auto;
    }

    .nav {
        width: 100%;
        height: 28px;
        line-height: 28px;
        font-size: 12px;
        color: #555;
        background-color: #f5f5f5;
        /* position: relative; */
    }

    .nav-container {

        display: flex;
        justify-content: space-between;
    }

    .nav-left {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    /*河南部分遮挡  */

    .bg-white {
        height: 28px;
        padding: 0 15px;
        border: 1px solid transparent;
        border-bottom: none;
    }

    .bg-white:hover {
        border-color: #ccc;
    }

    #cover {
        width: 75px;
        position: absolute;
        top: -1px;
        background-color: white;
        border: 1px solid white;
    }

    .left-li:hover {
        background-color: white;
    }

    .left-li a {
        text-decoration: none;
    }

    .alert-box {
        position: absolute;
        top: 28px;
        margin-left: -16px;
        padding: 0;
        background-color: white;
        display: none;
        list-style: none;
        width: 300px;
        z-index: 20;
        border: 1px solid #ccc;
    }

    .alert-boxbottom {
        border-bottom: 1px dashed #999;
        margin-top: 10px;
    }

    .left-li:hover .alert-box {
        display: block;
    }

    .city-list {
        padding: 0 20px;
    }
    /*设置下箭头间距*/

    .left-li span {
        margin-left: 10px;
    }

    .nav-right {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: flex-start;
    }

    .nav-right>li::after {
        content: '/';
        margin-left: 10px;
        opacity: 0.4;
    }

    .nav-right>li:nth-last-child(1):after {
        content: '';
    }

    .nav-right a {
        text-decoration: none;
    }

    .please-login {
        border: 1px solid transparent;
        border-bottom: none;
    }

    .please-login:hover {
        border-color: #ccc;
        background-color: white;
    }
    /*     
    li.please-login:hover .nav-right>li:nth-of-type(1):after{
        visibility:hidden;
       
    } */

    .please-login:hover .login-ul {
        display: block;
    }


    .login-ul {
        display: none;
        margin: 0;
        padding: 0;
        list-style: none;
        width: 300px;
        height: 170px;
        border: 1px solid #ccc;
        position: absolute;
        margin-left: -6px;
        background-color: white;
    }

    #cover2 {
        width: 70px;
        position: absolute;
        top: -1px;
        background-color: white;
        border: 1px solid white;
    }


    .login-logo {
        width: 40px;
        height: 40px;
        display: inline-block;
        background-image: url(./唯品会/header.png);
        background-position: -1px -180px;
        margin-right: 10px;
    }

    .login-hello {
        display: flex;
        justify-content: flex-start;
        padding-top: 20px;
        width: 200px;
        margin: 0 auto;
    }

    .logo-welcome {
        text-align: center;
        width: 120px;
        height: 30px;
        border-bottom: 1px dashed #ccc;
    }


    .login-li {
        width: 220px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }

    .login-li li {
        width: 105px;
    }

    .arrow-two,
    .arrow-three,
    .arrow-four,
    .arrow-five {
        margin: 0 5px;
    }

    .arrow {
        position: relative;
        display: inline-block;
        border-top: 5px solid #999;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid transparent;
        top: 4px;
    }

    span.arrow-six {
        position: relative;
        top: 5px;
        margin-left: 6px;
        display: inline-block;
    }

    .nav-left:hover .arrow-one,
    .right-four:hover .arrow-two,
    .right-five:hover .arrow-three,
    .right-six:hover .arrow-four,
    .right-eight:hover .arrow-five {
        border-top: 5px solid transparent;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #F10180;
        position: relative;
        top: -3px;
    }

    .login-ul li,
    .nav-right li {
        padding-left: 5px;
        padding-right: 10px;
    }



    .gift {
        width: 15px;
        height: 18px;
        background-image: url(./唯品会/header_sign.gif);
        display: inline-block;
    }

    .phone {
        width: 10px;
        height: 14px;
        display: inline-block;
        margin-right: 5px;
        background-image: url(./唯品会/header.png);
        background-position: -100px -150px;
    }

    .left-li a:hover,
    .nav-right a:hover {
        color: red;
    }
    /*签到css*/

    .qiandao-ul {
        width: 500px;
        height: 150px;
        border: 1px solid #999;
        background-color: white;
        position: absolute;
        margin-left: -220px;
        padding: 0;
        list-style: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        /* 隐藏签到部分的下拉框*/
        display: none;
        z-index: 10;
    }

    .right-three:hover .qiandao-ul {
        display: block;
    }


    .circle {
        width: 25px;
        height: 25px;
        display: inline-block;
        background-image: url(./唯品会/header.png);
        background-position: -50px -195px;
    }

    .div-circle {
        display: flex;
        justify-content: flex-start;
    }

    .qiandao-ul p {
        margin: 0px;
    }

    .qiandao-ul li {
        margin-top: 10px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .qiandao-bottom {
        padding-top: 10px;
        width: 460px;
        display: flex;
        justify-content: space-between;
    }

    .qiandao-line1 {
        width: 422px;
        height: 20px;
        border-top: 1px solid #999;
        opacity: 0.2;
        position: absolute;
        top: 23px;
    }

    .qiandao-line2 {
        width: 460px;
        border: 1px solid #999;
        opacity: 0.3;
    }

    .qiandao-button {
        width: 70px;
        border-radius: 5px;
        border: 0;
        color: white;
        background-color: #F10180;
    }
    /*我的特卖下拉css  */

    .alert-ul {
        position: absolute;
        background-color: white;
        list-style: none;
        margin: 0;
        padding: 0;
        border: 1px solid #999;

        display: none;
        z-index: 50px;
    }

    .alert3 {
        margin-left: -5px;
        width: 105px;
    }

    .alert4 {
        margin-left: -15px;
        width: 100px;
    }

    .alert5 {
        z-index: 50;
        margin-left: -15px;
        width: 100px;
    }

    .alert6 {
         z-index: 50; 
        text-align: center;
        margin-left: -100px;
    }

    .alert6 img {
        padding-top: 10px;
        width: 180px;
        height: 180px;
    }

    .alert7 h3 {
        margin-top: 10px;
        margin-bottom: 2px;
    }

    .alert7 {
         z-index: 50; 
        padding-left: 20px;
        margin-left: -200px;
        width: 300px;
    }

    .alert7 p {
        margin-right: 10px;
        border: 1px dotted #999;
    }

    .right-four:hover .alert-ul,
    .right-five:hover .alert-ul,
    .right-six:hover .alert-ul,
    .right-seven:hover .alert-ul,
    .right-eight:hover .alert-ul {
        display: block;
    }
    /*一部分nav 放上的背景处理代码  */
    /* .right-four:hover,
    .right-five:hover,
    .right-six:hover,
    .right-seven:hover,
    .right-eight:hover{
        box-shadow: 0 0 10px white;
        background-color: white;
    } */
    /*header-logo css*/

    .header-logo {
        width: 100%;
        height: 100px;
    }

    .logo-containter {
        display: flex;
        justify-content: space-between;
        line-height: 100px;
    }

    .logo-left img {
        width: 250px;
        height: 100px;
    }

    .logo-left {
        margin-left: -10px;
    }

    .logo-right {
        margin-right: 20px;
    }

    .logo-right img {
        width: 126px;
        height: 100px;
    }

    .mybelt {
        color: #333;
        font-weight: bold;
        font-size: 13px;
        vertical-align: 45px;
        display: inline-block;
    }

    .belt {
        width: 20px;
        height: 28px;
        display: inline-block;
        background-image: url(./唯品会/header.png);
        background-position: 0px -52px;
    }
    /*3部分 header */

    header {
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: white;
        background-color: #F10180;
    }

    .header-left li:nth-of-type(1) {
        background-color: #BD1067;
    }

    .header-left li:hover {
        background-color: #BD1067;
    }

    .header-container {
        display: flex;
        justify-content: space-between;
        position: relative;   
    }

    .header-left,
    .header-right {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .header-left {
        display: flex;
        justify-content: flex-start;
    }

    .header-right {
        position: absolute;
        right: 0;
        background-color: #F10180;
        z-index: 2; 
    }

    .header-left li,
    .header-right li {
        font-size: 16px;
        display: inline-block;
        height: 40px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .header-left a,
    .header-right a {
        font-size: 16px;
        color: white;
        text-decoration: none;
    }

    .header-left li:nth-child(1),
    .header-left li:nth-child(2),
    .header-left li:nth-child(3),
    .header-left li:nth-child(4) {
        font-weight: bold;
    }

    .icon {
        display: inline-block;
        width: 20px;
        height: 32px;
        vertical-align: middle;
        margin-top: -5px;
        margin-right: 3px;
    }


    .icon1 {
        background-image: url(./唯品会/5.png);
    }

    .icon2 {
        background-image: url(./唯品会/6.png);
    }
    /*更多下拉 图片效果 css  */

    .aside-effect {
        width: 558px;
        height: 260px;
        box-shadow: 0 0 10px lightgray;
        background-color: white;
        position: absolute;
        top: 40px;
        left: 190px;
        padding-left: 10px;
        padding-top: 10px;
        display: none;
        z-index: 100;
    }

    .header-left li:nth-of-type(9):hover .aside-effect {
        display: block;
    }


    .tier-move {
        width: 170px;
        height: 100px;
        margin-left: 10px;
        color: white;
        font-weight: bold;
        position: relative;
        float: left;
        margin-top: 10px;
        overflow: hidden;
        border-radius: 5px;
    }

    .clear {
        clear: both;
    }

    .tier-second {
        width: 170px;
        height: 100px;
        text-align: center;
        position: absolute;
        top: 60px;
    }

    .tier {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50px;
        background: linear-gradient(transparent, black);
    }

    .tier-move:hover .tier-second {
        top: 30%;
        transition: all 0.5s;
    }

    .tier-move:hover .tier {
        top: 0;
        transition: all 0.3s;
    }
    /*轮播图 css  */
    .main {
        width: 100%;
        height: 500px;
        background-repeat: no-repeat;
        background-image: url(./唯品会/lunbo.jpg);
    }

    .container-lunbo {
        position: relative;
    }

    .box {
        width: 1120px;
        height: 450px;
        /* border:1px solid red; */
        position: absolute;
        top: 50px;
        left: 400px;
        z-index: 1;
        overflow: hidden;  
    }
    
    .img-list img {
        width: 1120px;
        height: 400px;
    }

    .img-list,
    .lunbo-line {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .lunbo-line a {
        text-decoration: none;
    }

    .img-list li {
        display: none;
    }
    /*轮播图显示 className  */
    .img-list li.current {
        display: block;
    }

    .direction a {
        text-decoration: none;
    }

    div.direction {
        position: absolute;
        left: 0;
        top: 0;
    }
    /*方向键  左右效果*/

    .img-btn {
        width: 40px;
        height: 60px;
        line-height: 60px;
        color: white;
        text-align: center;
        background-color: black;
        opacity: 0.3;
        position: absolute;
        text-decoration: none;
        font-size: 20px;
        top: 180px;

        transition: all 0.3s linear;
        border-radius: 2px;     
    }

     .prev {
         left: -40px; 
     
    }
    .next {
         right: -40px; 
    }
    /*轮播图 下部文字  */
    .lunbo-line {
        font-size: 12px;
        color: #666;
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
    }

    .lunbo-line li {
        text-align: center;
        width: 270px;
        height: 40px;  
    }

    .pink-hengxian{
        margin-left: 5px;
        width: 270px;
        height: 1px;
        border:1px solid #F10180;
        position: absolute;
        left: 0;
        transition: all 0.3s linear;
    }

   
    /*中部内容css  */

    .main-two {
        /* border: 1px solid red; */
        height: 230px;
        width: 100%;
        margin: 5px;
      
    }

    div.container-maintwo {

        width: 1140px; 
        margin: 0 auto;
        /* border:1px solid red; */
 
    
    }

    .main-two h6 {
        color: #999;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
        font-weight: normal;
    }
    /*侧边栏css*/

    .right-aside {
        width: 36px;
        height:100%;
        background-color: #262626;
        position: fixed;
        right: 0;
        top: 0;
        z-index:20;  
    }

    .rightaside-ul {
        border: 1px solid transparent;
        margin: 0;
        padding: 0;
        list-style: none;
        position: relative;
        top: 180px;
        background-color: #262626;  
        
    }
    .rightaside-ul a {
        /* color: white; */
        text-decoration: none;
    }

    .aside-toplogo li {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .aside-lastlogo {
        background-color: #262626;
         position: absolute; 
         top: 600px; 
    }

    /*你好登录css*/
    .alert-zhanghao{
        width: 320px;
        height: 380px;
        position: absolute;
        top: 0;
        left:36px;   
        background-color: white;
        transition: all 0.3s linear; 
        z-index:-100; 
    }

    .meng-login{
        text-align: center;
        width: 150px;
        margin: 40px auto;
    }
  
   .aside-logo1 {
        width: 36px;
        height: 42px;
        background-image: url(./唯品会/sprite.png);
        display: inline-block;
        background-position: 0px -130px;
    }

    .aside-logo2 {
        width: 36px;
        height: 150px;
        display: inline-block;
        background-image: url(./唯品会/aside-logo2.jpg);
    }



    .aside-logo3 {
        width: 36px;
        height: 22px;
        background-image: url(./唯品会/sprite.png);
        display: inline-block;
        background-position: -160px -44px;
    }

    .aside-logo4 {
        width: 36px;
        height: 20px;
        background-image: url(./唯品会/sprite.png);
        display: inline-block;
        background-position: -80px -2px;
    }

    .aside-logo5 {
        width: 36px;
        height: 22px;
        background-image: url(./唯品会/sprite.png);
        display: inline-block;
        background-position: -120px -2px;
    }

    .aside-logo6 {
        width: 36px;
        height: 22px;
        background-image: url(./唯品会/sprite.png);
        display: inline-block;
        background-position: -160px -2px;
    }

    .aside-logo7 {
        width: 36px;
        height: 36px;
        background-image: url(./唯品会/sprite.png);
        display: inline-block;
        background-position: -120px -90px;
    }

    .aside-logo8 {
        width: 36px;
        height: 36px;
        background-image: url(./唯品会/sprite.png);
        display: inline-block;
        background-position: -80px -90px;
    }
    .asideLogo:hover {
        background-color: #BD1067;
    }




    /*aside弹出效果 */
    .alert-aside {
        position: absolute;
        left: 0px; 
        display: inline-block;
        text-align: center;
        width: 100px;
        height: 28px;
        line-height: 28px;
        box-shadow: 0 0 5px #666;
        background-color: white;
         z-index: -100;  
      
        transition: all 0.3s linear;  
    }

  
   
    .alert-info3:hover .alert-aside3{ 
      left:-101px;
    }  
      .alert-info4:hover .alert-aside4{ 
      left:-101px;
    }  
     .alert-info5:hover .alert-aside5{ 
      left:-101px;
    }  
     .alert-info6:hover .alert-aside6{ 
      left:-101px;
    }  
     .alert-info7:hover .alert-aside7{ 
      left:-101px;
    } 
    .alert-info8:hover .alert-aside8{ 
      left:-101px;
    }  

  
    .alert-aside3 {
        top: 250px;
    }

    .alert-aside4 {
        top: 295px;
    }

    .alert-aside5 {
        top: 340px;
    }

    .alert-aside6 {
        top: 385px;
    }

    .alert-aside7 {
    
        top: 5px;
    }

    .alert-aside8 {
        top: 45px;
    }
    /*侧边栏 账号弹出内容效果*/
    .alert-zhanghaologo {
        width: 45px;
        height: 45px;

        background-image: url(./唯品会/header.png);
        display: inline-block;
        background-position: 0px -180px;
    }
    .zhanghao-central{
        margin: 0 auto;
        width: 100%;
        height: 160px;
        border:1px solid #999;
        border-left:1px solid transparent;
        border-right:1px solid transparent;
    }
   .zhanghao-central2{
        width: 260px;
        height: 120px;
        margin: 20px auto;
        border:1px solid #999;  
        display: flex;
        justify-content: space-around;
   }
   .zhanghao-central2>a{
       width: 130px;
       height: 90px;
       margin-top:15px;
       text-align: center;
       margin-bottom: 10px;
   }
    .zhanghao-central2>a:nth-child(1){
        border-right:1px solid #999;
    }


.zhanghao-bottom{
    font-size: 14px;
    position: absolute;
    right: 20px;
    bottom:10px;
    border:1px solid transparent;
    cursor: pointer;
}
.dingdan-tubiao{
        width: 26px;
        height:30px;
        background-image: url(./唯品会/sprite.png);
        display: inline-block;
        background-position: -200px -85px;
        margin: 0;
}

.xiaoxi-tubiao{
    width: 26px;
        height:30px;
        background-image: url(./唯品会/sprite.png);
        display: inline-block;
        background-position: -200px -58px;
        margin: 0px;
}

.gaodu{
    height: 1000px;
}

   
</style>

<body>
    <nav class="nav">
        <div class="containter nav-container">
            <ul class="nav-left">
                <li class="bg-white left-li"><a href="">河南</a><span class="arrow arrow-one"></span>
                    <ul class="alert-box">
                        <li id="cover"></li>
                        <div class="city-list">
                            <h3 class="alert-boxbottom">请选择所在的收货地区</h3>
                            <li>A&nbsp;<a href="">安徽&nbsp;</a><a href="">澳门</a></li>
                            <li>B&nbsp;<a href="">北京</a></li>
                            <li>C&nbsp;<a href="">重庆</a></li>
                            <li>F&nbsp;<a href="">福建</a></li>
                            <li>G&nbsp;<a href="">广东&nbsp;</a><a href="">广西</a></li>
                            <li>H&nbsp;<a href="">河北&nbsp;</a><a href="">河南</a></li>
                        </div>
                    </ul>
                </li>
            </ul>

            <ul class="nav-right">
                <li class="please-login"><a href="">请登录</a>
                    <ul class="login-ul">
                        <li id="cover2"></li>
                        <div class="login-hello">
                            <span class="login-logo"></span>
                            <span class="logo-welcome">您好!&nbsp;&nbsp;&nbsp;[请登录]</span>
                        </div>

                        <div class="login-li">
                            <li><a href="">我的收藏</a></li>
                            <li><a href="">我的订单</a></li>
                            <li><a href="">零钱</a></li>
                            <li><a href="">我的优惠卷</a></li>
                            <li><a href="">我的唯品会</a></li>
                            <li><a href="">唯品金融</a></li>
                        </div>
                    </ul>
                </li>

                <li> <a href="">注册</a></li>
                <li class="right-three"><span class="gift"></span><a href="">签到有礼</a>
                    <ul class="qiandao-ul">
                        <div class="div-circle">
                            <li>
                                <p class="circle"></p>
                                <p>1天</p>
                            </li>
                            <li>
                                <p class="circle"></p>
                                <p>2天</p>
                            </li>
                            <li>
                                <p class="circle"></p>
                                <p>3天</p>
                            </li>
                            <li>
                                <p class="circle"></p>
                                <p>4天</p>
                            </li>
                            <li>
                                <p class="circle"></p>
                                <p>5天</p>
                            </li>
                            <li>
                                <p class="circle"></p>
                                <p>6天</p>
                            </li>
                            <li>
                                <p class="circle"></p>
                                <p>7天</p>
                            </li>
                        </div>

                        <li class="qiandao-li">
                            <p class="qiandao-line1"></p>
                            <p class="qiandao-line2"></p>
                            <div class="qiandao-bottom">
                                <a href="">每天签到送惊喜，连续签到更有心动奖励</a>
                                <button type="button" class="qiandao-button">签到</button>
                            </div>
                        </li>

                    </ul>


                </li>

                <li><a href="">我的订单</a></li>

                <li class="right-four"><a href="">我的特卖</a><span class="arrow arrow-two"></span>
                    <ul class="alert-ul alert3">
                        <li><a href="">品牌收藏(0)</a></li>
                        <li><a href="">商品收藏(0)</a></li>
                        <li><a href="">我的足迹(0)</a></li>
                    </ul>
                </li>
                <li class="right-five"><a href="">会员俱乐部</a><span class="arrow arrow-three"></span>
                    <ul class="alert-ul alert4">
                        <li><a href="">俱乐部首页</a></li>
                        <li><a href="">唯品币兑换</a></li>
                        <li><a href="">免费抽大奖</a></li>
                    </ul>
                </li>
                <li class="right-six"><a href="">客户服务</a><span class="arrow arrow-four"></span>
                    <ul class="alert-ul alert5">
                        <li><a href="">联系客服</a></li>
                        <li><a href="">帮助中心</a></li>
                        <li><a href="">服务中心</a></li>
                        <li><a href="">知识产权投诉</a></li>
                    </ul>
                </li>
                <li class="right-seven"><span class="phone"></span><a href="">手机版</a>
                    <ul class="alert-ul alert6">
                        <li><img src="./唯品会/二维码.jpg" alt=""></li>
                        <li><a href="">随时逛随时抢</a></li>
                    </ul>
                </li>
                <li class="right-eight"><a href="">更多</a><span class="arrow arrow-five"></span>
                    <ul class="alert-ul alert7">
                        <li>
                            <h3>合作专区</h3>
                            <a href="">联名卡申请&#x3000;</a>
                            <a href="">唯品卡&#x3000;</a>
                            <a href="">支付专区</a>
                        </li>
                        <p></p>
                        <li>
                            <h3>关于我们</h3>
                            <a href="">sell&nbsp;on&nbsp;vip&#x3000;</a>
                            <a href="">官方博客&#x3000;</a>
                            <a href="">品牌招商</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <div class="header-logo">
        <div class="containter logo-containter">
            <section class="logo-left">
                <a href="javascript::;"><img src="./唯品会/l1.png" alt=""></a>
            </section>

            <section class="logo-right">
                <a href="javascript::;"><img src="./唯品会/r1.png" alt=""></a>
                <a href="javascript::;"><img src="./唯品会/r2.png" alt=""></a>
                <a href="javascript::;"><img src="./唯品会/r3.png" alt=""></a>

                <span class="mybelt"> 
                <span class="belt"></span>
                <span>我的购物袋</span>
                </span>
            </section>
        </div>
    </div>

    <header>
        <div class="containter header-container">
            <ul class="header-left">
                <li><a href="">首页</a></li>
                <li><a href="">唯品国际</a></li>
                <li><a href="">母婴</a></li>
                <li><a href="">家居家电</a></li>
                <li><a href="">男士</a></li>
                <li><a href="">美妆</a></li>
                <li><a href="">生活超市</a></li>
                <li><a href="">金融</a></li>
                <li><a class="alert-gengduo" href="">更多</a><span class="arrow arrow-six"></span>
                    <aside class="aside-effect">
                        <div class="tier-move">
                            <img src="./唯品会/small1.jpg" alt="">
                            <div class="tier"></div>
                            <div class="tier-second">女装</div>
                        </div>

                        <div class="tier-move">
                            <img src="./唯品会/small2.jpg" alt="">
                            <div class="tier"></div>
                            <div class="tier-second">鞋包</div>
                        </div>

                        <div class="tier-move">
                            <img src="./唯品会/small3.jpg" alt="">
                            <div class="tier"></div>
                            <div class="tier-second">配饰</div>

                        </div>

                        <div class="tier-move">
                            <img src="./唯品会/small4.jpg" alt="">
                            <div class="tier"></div>
                            <div class="tier-second">运动</div>

                        </div>

                        <div class="tier-move">
                            <img src="./唯品会/small5.jpg" alt="">
                            <div class="tier"></div>
                            <div class="tier-second">唯品~奢</div>
                        </div>

                        <div class="clear"></div>

                </li>
            </ul>
            <ul class="header-right">
                <li><a href=""> <span class="icon icon1"></span><span>分类</span></a>
                </li>
                <li><a href=""> <span class="icon icon2"></span> <span>预告</span></a>
                </li>
            </ul>
            </aside>
    </header>

    <main class="main">
        <div class="container-lunbo">

            <div class="box">
                <ul class="img-list">
                    <li class="current"><a href=""><img src="./唯品会/lunbo01.jpg" alt=""></a></li>
                    <li><a href=""><img src="./唯品会/lunbo02.jpg" alt=""></a></li>
                    <li><a href=""><img src="./唯品会/lunbo03.jpg" alt=""></a></li>
                    <li><a href=""><img src="./唯品会/lunbo04.jpg" alt=""></a></li>
                </ul>

               <ul class="lunbo-line">
                    <li class="active"><a href="">时尚风暴&nbsp;最高满199减40</a></li>|
                     <div class="pink-hengxian"></div>
                    <li><a href="">新人专享2重礼</a></li>|
                    <li><a href="">净水节&nbsp;最高500元红包</a></li>|
                    <li><a href="">安莉芳集团&nbsp;跨专场3件8折</a></li>
                   
                </ul>

                <a href="#" class="img-btn prev">&lt;</a>
                <a href="#" class="img-btn next">&gt;</a>
            </div>
        </div>
        </div>
    </main>

    <!--中部内容  -->
    <div class="main-two">
        <div class="container-maintwo">
            <h6>尖货清仓&nbsp;最高满199减100</h6>
            <div>
                <a href=""><img src="./唯品会/main-two1.jpg" alt=""></a>
                <a href=""><img src="./唯品会/main-two2.jpg" alt=""></a>
                <a href=""><img src="./唯品会/main-two3.jpg" alt=""></a>
            </div>
            <div>
                <a href=""><img src="./唯品会/title_v2.jpg" alt=""></a>
            </div>
        </div>

        <!--侧边栏内容-->
        <aside class="right-aside">

            <ul class="rightaside-ul">

                <div class="aside-toplogo">
                <li class="rightaside-li1"><a href=""><span class="asideLogo aside-logo1"></a>
                <span class="alert-zhanghao">
                    
                    <div class="meng-login"> 
                <div class="zhanghao-meng"><a href=""><img src="./唯品会/meng11.jpg" alt=""></a></div>
                <span>你好!&nbsp;&nbsp;请登录&nbsp;|&nbsp;注册</span>
                    </div>

                        <div class="zhanghao-central">
                            <div class="zhanghao-central2">

                            <a href="#">
                                <p class="dingdan-tubiao"></p>
                                <p>我的订单</p>
                            </a>
                            <a href="">
                                <p class="xiaoxi-tubiao"></p>
                                <p>我的消息</p>
                            </a>
                            </div>
                        </div>
                         <div class="zhanghao-bottom">会员俱乐部</div> 
                        
                </span>
                    </li>

                    <li ><a href=""><span class="asideLogo aside-logo2"></span></a></li>
                    <li class="alert-info3"><a href=""><span class="asideLogo aside-logo3"></span></a>
                        <span class="alert-aside alert-aside3">我的优惠卷</span>
                    </li>
                    <li class="alert-info4"><a href=""><span class="asideLogo aside-logo4"></span></a>
                        <span class="alert-aside alert-aside4">品牌收藏</span>
                    </li>
                    <li class="alert-info5"><a href=""><span class="asideLogo aside-logo5"></span></a>
                        <span class="alert-aside alert-aside5">商品收藏</span>
                    </li>
                    <li class="alert-info6"><a href=""><span class="asideLogo aside-logo6"></span></a>
                        <span class="alert-aside alert-aside6">我的足迹</span>
                    </li>
                </div>
                <div class="aside-lastlogo">
                    <li class="alert-info7"><a href=""><span class="asideLogo aside-logo7"></span></a>
                        <span class="alert-aside alert-aside7">我的足迹</span>
                    </li>
                    <li class="alert-info8"><a href=""><span class="asideLogo aside-logo8"></span></a>
                        <span class="alert-aside alert-aside8">返回顶部</span>
                    </li>
                </div>
            </ul>
        </aside>

        <div class="gaodu"> 

        </div>
</body>

</html>
<script>
    var box = document.querySelector('.box');
    var imgLis = document.querySelectorAll('.img-list li');
    var lunboLines = document.querySelectorAll('.lunbo-line li');
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    var pinkLine = document.querySelector('.pink-hengxian');


    function prevImg() {
        index = index == 0 ? index = imgLis.length - 1 : index - 1;
        showImg();
    }
    function nextImg() {
        index = index == imgLis.length - 1 ? 0 : index + 1;
        showImg();
    }

    var index = 0;

    function showImg() {
        for (var i = 0; i < imgLis.length; i++) {
            imgLis[i].className = '';
            
        }
        console.log(index);
        imgLis[index].className = 'current';

          var left = lunboLines[index].offsetLeft;
           pinkLine.style.left = left + 'px';

    }
    var timer = setInterval(nextImg, 1000);

    for (var i = 0; i < lunboLines.length; i++) {
        lunboLines[i].index = i;

        lunboLines[i].onmouseover = function () {
            index = this.index;
            showImg();
        }
    }


    box.onmouseover = function () {
        clearInterval(timer);
        timer = null;
        prev.style.display = 'block';
        next.style.display = 'block';
        prev.style.left = '0px';
        next.style.right = '0px';

    }
    box.onmouseout = function () {
        if (timer != null) {
            return;
        }
        prev.style.left = '-40px';
        next.style.right = '-40px';
        timer = setInterval(nextImg, 1000);
    }
    prev.onclick = function () {
        prevImg();
    }
    next.onclick = function () {
        nextImg();
    }

    // 侧边栏帐号登录
    var alertLi = document.querySelector('.rightaside-li1');
    var alert1 = document.querySelector('.alert-zhanghao');

     alertLi.onmouseenter =function(){
      alert1.style.left = -alert1.offsetWidth+'px'
     }
     alertLi.onmouseleave = function(){
          alert1.style.left =36+'px';
     }

  // 返回顶部js
     var alertFH = document.querySelector('.alert-info8')
        alertFH.onclick=function(){
    document.documentElement.scrollTop = document.body.scrollTop = 0;
        }
</script>